<template>
  <div v-loading.fullscreen="defaultLoading" element-loading-background="rgba(0, 0, 0, 0)" class="page-post">
    <main v-loading="articleLoading">
      <div class="container-post">
        <div v-if="thread.isApproved === 0" class="checking">
          {{ thread.threadVideo && thread.threadVideo.status === 0 ? $t('topic.VideoTranscoding') : $t('topic.examineTip') }}
        </div>
        <topic-header
          :author="thread.user || {}"
          :thread="thread"
          :management-list="managementList"
          :be-asked-user="question && question.beUser ? question.beUser : {}"
          @managementSelected="postCommand"
        />
        <topic-content
          :article="article"
          :title="thread.title || ''"
          :video="thread.threadVideo || {}"
          :audio="thread.threadAudio || {}"
          :paid-information="paidInformation"
          :thread-type="thread.type || 0"
          :category="thread.category || {}"
          :location="location"
          @payForThread="showCheckoutCounter = true"
        />
        <qa-actions
          v-if="thread.type === 5"
          :question="question || {}"
          :current-user-id="currentUser && currentUser.id ? currentUser.id : ''"
          :question-user-id="thread.user && thread.user.id ? thread.user.id : ''"
          @answerPublished="getThread()"
          @payForAnswer="showCheckoutCounter = true"
        />
        <topic-reward-list
          :author="thread.user || {}"
          :paid-information="paidInformation"
          :can-paid="forums && forums.paycenter && forums.paycenter.wxpay_close"
          :can-reward="forums && forums.paycenter && forums.paycenter.wxpay_close && thread.canBeReward"
          :thread-type="thread.type || 0"
          :user-lists="[thread.paidUsers || [], thread.rewardedUsers || [], article.likedUsers || [], []]"
          @payOrReward="showCheckoutCounter = true"
        />
        <topic-actions :thread-id="threadId" :actions="actions || []" @clickAction="postCommand" />
        <topic-checkout-counter
          v-if="showCheckoutCounter"
          :thread-type="thread.type || 0"
          :user="thread.user || {}"
          :amount="payOrRewardAmount"
          :content="article.summaryText || ''"
          :reward-or-pay="rewardOrPay"
          :be-asked-user="question.beUser || {}"
          ask-or-watch-answer="watchAnswer"
          @close="showCheckoutCounter = false"
          @paying="paying"
        />
        <topic-password
          v-if="showPasswordInput"
          :price="payOrRewardAmount"
          :password-error.sync="passwordError"
          :password-error-tip="passwordErrorTip"
          @close="showPasswordInput = passwordError = false"
          @password="onPasswordInputCompleted"
          @findPassword="onFindPassword"
        />
        <topic-wx-pay v-if="showWxPay" :qr-code="payment.wechat_qrcode" @close="showWxPay = false" />
        <find-paypwd
          v-if="findPassword && currentUser.originalMobile"
          :mobile="currentUser.mobile"
          :phonenum="currentUser.originalMobile"
          @close="findPassword = false"
        />
        <!-- 找回密码，没绑定手机 -->
        <without-phone v-if="findPassword && !currentUser.originalMobile" @close="findPassword = false" />
        <comment :thread-id="threadId" />
      </div>
    </main>
    <topic-aside :author="thread.user || {}" />
  </div>
</template>

<script>
const threadInclude = 'posts.replyUser,threadAudio,user.groups,user,user.groups.permissionWithoutCategories,posts,posts.user,posts.likedUsers,posts.images,firstPost,firstPost.likedUsers,firstPost.images,firstPost.attachments,rewardedUsers,category,threadVideo,paidUsers,question,question.beUser,question.images,onlookers'
import handleError from '@/mixin/handleError'
import isLogin from '@/mixin/isLogin'
import payment from '@/mixin/payment'
import env from '@/utils/env'

export default {
  name: 'Topic',
  layout: 'custom_layout',
  mixins: [handleError, isLogin, payment],
  async asyncData({ params, store }) {
    if (!env.isSpider) {
      return {}
    }
    try {
      const threadData = await store.dispatch('jv/get', [`threads/${params.id}`, { params: { include: threadInclude }}])
      return { thread: threadData, article: threadData.firstPost, postId: threadData.firstPost._jv.id }
    } catch (error) {
      return { articleLoading: true }
    }
  },
  data() {
    return {
      thread: {},
      article: {},
      question: {},
      postId: 0,
      actions: [
        { text: this.$t('topic.read'), count: 0, command: '', canOpera: false, icon: 'book' },
        { text: this.$t('topic.getLike'), count: 0, command: 'isLiked', canOpera: false, isStatus: false, icon: 'like' },
        { text: this.$t('topic.collection'), command: 'isFavorite', canOpera: false, isStatus: false, icon: 'favor' },
        { text: this.$t('topic.share'), command: 'showLink', canOpera: true, icon: 'link' }
      ],
      paidInformation: { price: '0', paid: false, paidUsers: [], paidCount: 0, isPaidAttachment: false, attachmentPrice: '0' },
      payment: { wechat_qrcode: '', rewardAmount: '' },
      location: { location: '', latitude: '', longitude: '' },
      managementList: [
        { name: 'canEdit', command: 'toEdit', isStatus: false, canOpera: false, text: this.$t('topic.edit'), type: '0' },
        { name: 'canEssence', command: 'isEssence', isStatus: false, canOpera: false, text: this.$t('topic.essence'), type: '1' },
        { name: 'canSticky', command: 'isSticky', isStatus: false, canOpera: false, text: this.$t('topic.sticky'), type: '2' },
        { name: 'canHide', command: 'isDeleted', isStatus: false, canOpera: false, text: this.$t('topic.delete'), type: '3' }
      ],
      showCheckoutCounter: false,
      showPasswordInput: false,
      showWxPay: false,
      defaultLoading: false,
      articleLoading: false,
      passwordError: false,
      passwordErrorTip: '',
      findPassword: false
    }
  },
  computed: {
    threadId() {
      return this.$route.params.id
    },
    currentUser() {
      return this.$store.state.user.info.attributes || {}
    },
    forums() {
      return this.$store.state.site.info.attributes || {}
    },
    rewardOrPay() {
      const price = parseFloat(this.paidInformation.price)
      const attachmentPrice = parseFloat(this.paidInformation.attachmentPrice)
      const questionPrice = Object.keys(this.question).length > 0 ? parseFloat(this.question.onlooker_unit_price) : 0
      return price > 0 || attachmentPrice > 0 || questionPrice > 0 ? 'pay' : 'reward'
    },
    payOrRewardAmount() {
      const price = parseFloat(this.paidInformation.price || '0')
      const attachmentPrice = parseFloat(this.paidInformation.attachmentPrice || '0')
      const questionPrice = Object.keys(this.question).length > 0 ? parseFloat(this.question.onlooker_unit_price) : 0
      return price || attachmentPrice || questionPrice || this.payment.rewardAmount
    },
    payOrderType() {
      const price = parseFloat(this.paidInformation.price || '0')
      const attachmentPrice = parseFloat(this.paidInformation.attachmentPrice || '0')
      const questionPrice = Object.keys(this.question).length > 0 ? parseFloat(this.question.onlooker_unit_price) : 0
      // 1：注册，2：打赏，3：付费主题，4：付费用户组，5：问答提问支付，6：问答围观付费, 7: 付费附件
      if (price > 0) {
        return 3
      } else if (attachmentPrice > 0) {
        return 7
      } else if (questionPrice > 0) {
        return 6
      } else {
        return 2
      }
    }
  },
  mounted() {
    if (Object.keys(this.thread).length === 0) this.getThread()
    else this.initData()
  },
  methods: {
    getThread() {
      return this.$store.dispatch('jv/get', [`threads/${this.threadId}`, { params: { include: threadInclude }}]).then(data => {
        if (data.isDeleted) return this.$router.replace('/error')
        this.articleLoading = false
        this.thread = data
        this.article = data.firstPost
        this.postId = this.article._jv.id
        this.initData()
      }, e => this.handleError(e, 'thread'))
    },
    initData() {
      console.log('thread => ', this.thread)
      this.initManagementList(this.thread)
      this.initPaidInformation(this.thread)
      this.initActions(this.thread, this.article)
      this.initLocation(this.thread)
      this.initQuestion(this.thread)
      this.filterImages()
    },
    filterImages() {
      this.article.imageSource = this.article.images // 把原图路径记为 imageSource
      if (this.article.contentAttachIds && this.article.contentAttachIds.length > 0 && this.article.images && this.article.images.length > 0) {
        this.article.images = this.article.images.filter(image => this.article.contentAttachIds.indexOf(image._jv.id) < 0)
      }
    },
    initQuestion(data) {
      if (!data.question) return
      this.question = data.question
      this.question.onlookerState = data.onlookerState
      console.log(this.question, 'question')
    },
    initLocation(data) {
      for (const key in this.location) this.location[key] = data[key]
    },
    initPaidInformation(data) {
      for (const key in this.paidInformation) this.paidInformation[key] = data[key]
    },
    initManagementList(data) {
      this.managementList.forEach(item => {
        item.canOpera = data[item.name]
        if (item.name === 'canEssence') {
          item.isStatus = data.isEssence
          item.text = item.isStatus ? this.$t('topic.cancelEssence') : this.$t('topic.essence')
        } else if (item.name === 'canSticky') {
          item.isStatus = data.isSticky
          item.text = item.isStatus ? this.$t('topic.cancelSticky') : this.$t('topic.sticky')
        }
      })
      if ((this.thread.type === 4 || this.thread.type === 5) && this.managementList.filter(item => item.name === 'canEdit').length > 0) { // 语音贴和问答帖，不支持编辑
        this.managementList.filter(item => item.name === 'canEdit')[0].canOpera = false
      }
      this.thread.isEssence = data.isEssence
      this.managementList = this.managementList.filter(item => item.canOpera)
    },
    initActions(data, firstPost) {
      const viewInfo = { ...this.actions[0] }
      const favorInfo = { ...this.actions[2] }
      const likeInfo = { ...this.actions[1] }
      if (data) {
        viewInfo.count = data.viewCount
        favorInfo.isStatus = data.isFavorite
        favorInfo.text = favorInfo.isStatus ? this.$t('topic.collectionAlready') : this.$t('topic.collection')
        favorInfo.icon = favorInfo.isStatus ? 'favored' : 'favor'
        favorInfo.canOpera = data.canFavorite
      }
      if (firstPost) {
        likeInfo.count = firstPost.likeCount
        likeInfo.isStatus = firstPost.isLiked
        likeInfo.canOpera = firstPost.canLike
        likeInfo.text = likeInfo.isStatus ? this.$t('topic.liked') : this.$t('topic.getLike')
        likeInfo.icon = likeInfo.isStatus ? 'liked' : 'like'
      }

      this.$set(this.actions, 0, viewInfo)
      this.$set(this.actions, 1, likeInfo)
      this.$set(this.actions, 2, favorInfo)
    },
    paying({ payWay, hideAvatar, rewardAmount }) {
      if (this.rewardOrPay === 'reward' && (!rewardAmount || parseFloat(rewardAmount) === 0)) return this.$message.error(this.$t('pay.AmountCannotBeLessThan0'))
      this.payment.rewardAmount = rewardAmount
      this.showCheckoutCounter = false
      if (payWay === 'walletPay') {
        this.showPasswordInput = true
        this.createOrder(hideAvatar, this.payOrRewardAmount, this.payOrderType, 20).finally(() => { this.defaultLoading = false })
      } else if (payWay === 'wxPay') {
        if (!this.forums.paycenter.wxpay_close) return this.$message.warning(this.$t('pay.wxPayClose'))
        this.createOrder(hideAvatar, this.payOrRewardAmount, this.payOrderType, 10)
          .then(() => {
            this.payOrder().then(wechatQrcode => {
              this.payment.wechat_qrcode = wechatQrcode
              this.wxPayActive().then(() => {
                this.getThread()
              }, () => console.log('支付失败'))
            }, () => console.log('支付失败'))
          }).finally(() => { this.defaultLoading = false })
      }
    },
    onPasswordInputCompleted(password) {
      this.payOrder(password).then(() => {
        this.getThread()
      }, () => console.log('支付失败'))
    },
    postCommand(item) {
      if (this.defaultLoading) return
      if (!this.isLogin()) return
      this.defaultLoading = true
      const params = item.command === 'isLiked' ? { _jv: { type: `posts`, id: this.postId }} : { _jv: { type: `threads`, id: this.threadId }}
      params[item.command] = !item.isStatus
      return this.$store.dispatch('jv/patch', params).then(data => {
        data.firstPost && this.initManagementList(data)
        data.firstPost && this.initActions(data)
        if (item.command === 'isSticky') return item.isStatus ? this.$message.success(this.$t('topic.stickySuccess')) : this.$message.success(this.$t('topic.cancelStickySuccess'))
        if (item.command === 'isLiked') return this.setLikeUser(!item.isStatus, data)
        if (item.command === 'isDeleted') return this.afterDeleted()
      }, e => this.handleError(e)).finally(() => { this.defaultLoading = false })
    },
    setLikeUser(status, data) {
      this.initActions(null, data)
      status ? this.article.likedUsers.unshift(this.currentUser)
        : this.article.likedUsers.forEach((item, index, array) => { item.id === this.currentUser.id && array.splice(index, 1) })
    },
    afterDeleted() {
      this.$message({ typeInformation: 'success', message: this.$t('topic.deleteSuccessAndJumpToBack') })
      setTimeout(() => { this.$router.push('/') }, 1000)
    }
  },
  head() {
    return {
      title: ((this.thread && this.thread.title) ||
      (this.thread && this.thread.firstPost && this.thread.firstPost.summaryText.slice(0, 15)) ||
      '主题详情页') + (this.forums && this.forums.set_site && this.forums.set_site.site_name ? ' - ' + this.forums.set_site.site_name : '\u200E'),
      meta: [
        { hid: 'keywords', name: 'keywords', content: (this.thread.category && this.thread.category.name) || '' },
        { hid: 'description', name: 'description', content: (this.thread.firstPost && this.thread.firstPost.summaryText.slice(0, 80)) || '' },
        { name: 'og:video', content: this.thread.threadVideo && this.thread.threadVideo.media_url || '' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '@/assets/css/variable/color.scss';

  .page-post {
    background: #F4F5F6;
    width: 100%;
    display: flex;
    justify-content: space-between;

    main {
      background: transparent;
      flex: 1;
      > .container-post {
        border-radius: 3px;
        padding: 20px;
        width: 100%;
        background: #ffffff;
        > .checking {
          margin-bottom: 20px;
          border-radius: 5px;
          text-align: center;
          background: #EDEDED;
          height: 35px;
          line-height: 35px;
          color: $font-color-grey;
        }
      }
    }
  }

</style>
